{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 任务详情{% endblock %}

{% block page_title %}任务详情{% endblock %}

{% block page_actions %}
<a href="/tasks" class="btn btn-sm btn-outline-secondary">
    <i class="fas fa-arrow-left"></i> 返回任务列表
</a>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle text-primary"></i> 任务信息
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">任务ID:</dt>
                            <dd class="col-sm-8">{{ task.task_id }}</dd>
                            
                            <dt class="col-sm-4">关键词:</dt>
                            <dd class="col-sm-8">{{ task.keyword }}</dd>
                            
                            <dt class="col-sm-4">创建时间:</dt>
                            <dd class="col-sm-8">{{ task.start_time }}</dd>
                            
                            <dt class="col-sm-4">完成时间:</dt>
                            <dd class="col-sm-8">{{ task.end_time if task.end_time else '尚未完成' }}</dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">任务状态:</dt>
                            <dd class="col-sm-8">
                                {% if task.status == '完成' %}
                                <span class="badge badge-success">{{ task.status }}</span>
                                {% elif task.status == '失败' %}
                                <span class="badge badge-danger">{{ task.status }}</span>
                                {% elif task.status == '进行中' %}
                                <span class="badge badge-primary">{{ task.status }}</span>
                                {% else %}
                                <span class="badge badge-secondary">{{ task.status }}</span>
                                {% endif %}
                            </dd>
                            
                            <dt class="col-sm-4">笔记计划:</dt>
                            <dd class="col-sm-8">{{ task.target_notes_count }}</dd>
                            
                            <dt class="col-sm-4">评论计划:</dt>
                            <dd class="col-sm-8">{{ task.target_comments_count }}</dd>
                            
                            <dt class="col-sm-4">错误信息:</dt>
                            <dd class="col-sm-8">{{ task.error_message if task.error_message else '无' }}</dd>
                        </dl>
                    </div>
                </div>
                
                {% if task.status == '失败' %}
                <div class="alert alert-danger mt-3">
                    <i class="fas fa-exclamation-triangle"></i> 任务失败，原因: {{ task.error_message }}
                </div>
                {% endif %}
                
                <div class="text-center mt-4">
                    <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteTaskModal">
                        <i class="fas fa-trash"></i> 删除任务
                    </button>
                </div>
                
                <!-- 删除确认模态框 -->
                <div class="modal fade" id="deleteTaskModal" tabindex="-1" role="dialog" aria-labelledby="deleteTaskModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="deleteTaskModalLabel">确认删除</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                确定要删除关键词为 "{{ task.keyword }}" 的采集任务吗？
                                <p class="text-danger mt-2">
                                    <i class="fas fa-exclamation-triangle"></i> 此操作无法撤销，但不会删除已采集的数据。
                                </p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <form action="/tasks/{{ task.task_id }}/delete" method="post">
                                    <button type="submit" class="btn btn-danger">确认删除</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-chart-pie text-success"></i> 采集进度
            </div>
            <div class="card-body">
                <div id="progress-chart" style="height: 220px;"></div>
                
                <div class="progress-info mt-3">
                    <div class="mb-3">
                        <label>笔记采集进度:</label>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="progress flex-grow-1 mr-3" style="height: 10px;">
                                {% set note_percent = (task.actual_notes_count / task.target_notes_count * 100)|round|int if task.target_notes_count > 0 else 0 %}
                                <div class="progress-bar bg-info" role="progressbar" style="width: {{ note_percent }}%;" 
                                     aria-valuenow="{{ note_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="text-muted">{{ note_percent }}%</span>
                        </div>
                        <small class="text-muted">已采集 {{ task.actual_notes_count|default(0) }} / {{ task.target_notes_count|default(0) }} 笔记</small>
                    </div>
                    
                    <div>
                        <label>评论采集进度:</label>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="progress flex-grow-1 mr-3" style="height: 10px;">
                                {% set comment_percent = (task.actual_comments_count / task.target_comments_count * 100)|round|int if task.target_comments_count > 0 else 0 %}
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ comment_percent }}%;" 
                                     aria-valuenow="{{ comment_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="text-muted">{{ comment_percent }}%</span>
                        </div>
                        <small class="text-muted">已采集 {{ task.actual_comments_count|default(0) }} / {{ task.target_comments_count|default(0) }} 评论</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fas fa-book-open text-danger"></i> 已采集笔记</span>
        <a href="/notes?keyword={{ task.keyword }}" class="btn btn-sm btn-outline-secondary">查看全部</a>
    </div>
    <div class="card-body">
        {% if notes %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>点赞</th>
                        <th>收藏</th>
                        <th>评论数</th>
                        <th>采集时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for note in notes %}
                    <tr>
                        <td>{{ note.note_id }}</td>
                        <td>
                            <a href="/notes/{{ note.note_id }}">
                                {{ note.title|truncate(30) }}
                            </a>
                        </td>
                        <td>{{ note.author }}</td>
                        <td>{{ note.likes|default(0) }}</td>
                        <td>{{ note.collects|default(0) }}</td>
                        <td>{{ note.comments_count|default(0) }}</td>
                        <td>{{ note.collect_time }}</td>
                        <td>
                            <a href="/notes/{{ note.note_id }}" class="btn btn-sm btn-outline-info">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fas fa-file-alt fa-3x mb-3"></i>
            <p>暂无采集的笔记数据</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 进度饼图
    var progressChart = echarts.init(document.getElementById('progress-chart'));
    
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['已采集笔记', '剩余笔记', '已采集评论', '剩余评论']
        },
        series: [
            {
                name: '采集进度',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: {{ task.actual_notes_count|default(0) }}, 
                        name: '已采集笔记',
                        itemStyle: {color: '#3498db'}
                    },
                    {
                        value: {{ task.target_notes_count|default(0) - task.actual_notes_count|default(0) }}, 
                        name: '剩余笔记',
                        itemStyle: {color: '#95a5a6'}
                    },
                    {
                        value: {{ task.actual_comments_count|default(0) }}, 
                        name: '已采集评论',
                        itemStyle: {color: '#2ecc71'}
                    },
                    {
                        value: {{ task.target_comments_count|default(0) - task.actual_comments_count|default(0) }}, 
                        name: '剩余评论',
                        itemStyle: {color: '#bdc3c7'}
                    }
                ]
            }
        ]
    };
    
    progressChart.setOption(option);
    
    // 自动调整图表大小
    window.addEventListener('resize', function() {
        progressChart.resize();
    });
</script>
{% endblock %} 